<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
  <script src="js/stomp-7.0.0.js"></script>
</head>

<body>
<div>
  <h3>设置</h3>
  <label for="urlText">URL：</label><input id="urlText" type="text" value="http://127.0.0.1:8080/">
  <br>
  <label for="wsUrlText">WebSocket URL：</label><input id="wsUrlText" type="text" value="ws://127.0.0.1:8080/ws">
  <br>
  <label for="gatewaySnText">网关序号：</label><input id="gatewaySnText" type="text" value="123">
  <br>
  <label for="deviceSnText">设备序号：</label><input id="deviceSnText" type="text" value="1">
  <br>
  <input id="connectBtn" type="button" value="连接WebSocket">
  <h4>消息</h4>
  <div id="msg">暂无</div>
</div>
<div>
  <h3>事件</h3>
  <h4>温度计事件</h4>
  <textarea id="thermometerMsg" readonly cols="50" rows="5"></textarea>
</div>
<div>
  <h3>故障详情</h3>
  <textarea id="faultMsg" readonly cols="50" rows="5"></textarea>
</div>
<div>
  <h3>广播</h3>
  <h4>校时广播</h4>
  <textarea id="timeSynMsg" readonly cols="50" rows="5"></textarea>
</div>
<div>
  <h3>交流</h3>
  <h4>获取时间戳</h4>
  <textarea id="getTimeMsg" readonly cols="50" rows="5"></textarea>
</div>
<div>
  <h3>交互</h3>
  <h4>设置通信地址</h4>
  <textarea id="setCommunicationAddressSendText" cols="50" rows="5">{
  "uri": "mqtt://127.0.0.1:1883",
  "username": "account",
  "password": "pwd"
}</textarea>
  <input id="setCommunicationAddressSendBtn" type="button" value="发送">
  <br>
  <textarea id="setCommunicationAddressMsg" readonly cols="50" rows="5"></textarea>
  <h4>设置温度计配置</h4>
  <textarea id="setThermometerSendText" cols="50" rows="5">{
  "intervalRefresh": 1,
  "intervalPush": 2,
  "temperatureMax": 30,
  "temperatureMin": 10
}</textarea>
  <input id="setThermometerSendBtn" type="button" value="发送">
  <br>
  <textarea id="setThermometerMsg" readonly cols="50" rows="5"></textarea>
  <h4>获取通信地址</h4>
  <input id="getCommunicationAddressSendBtn" type="button" value="发送">
  <br>
  <textarea id="getCommunicationAddressMsg" readonly cols="50" rows="5"></textarea>
  <h4>获取网关配置</h4>
  <input id="getGatewayInfoSendBtn" type="button" value="发送">
  <br>
  <textarea id="getGatewayInfoMsg" readonly cols="50" rows="5"></textarea>
  <h4>获取温度计配置</h4>
  <input id="getThermometerSendBtn" type="button" value="发送">
  <br>
  <textarea id="getThermometerMsg" readonly cols="50" rows="5"></textarea>
</div>
</body>
<script>
  const urlText = document.getElementById('urlText')
  const wsUrlText = document.getElementById('wsUrlText')
  const gatewaySnText = document.getElementById('gatewaySnText')
  const deviceSnText = document.getElementById('deviceSnText')
  const connectBtn = document.getElementById('connectBtn')
  const msg = document.getElementById('msg')
  const thermometerMsg = document.getElementById('thermometerMsg')
  const faultMsg = document.getElementById('faultMsg')
  const timeSynMsg = document.getElementById('timeSynMsg')
  const getTimeMsg = document.getElementById('getTimeMsg')
  const setCommunicationAddressSendText = document.getElementById('setCommunicationAddressSendText')
  const setCommunicationAddressSendBtn = document.getElementById('setCommunicationAddressSendBtn')
  const setCommunicationAddressMsg = document.getElementById('setCommunicationAddressMsg')
  const setThermometerSendText = document.getElementById('setThermometerSendText')
  const setThermometerSendBtn = document.getElementById('setThermometerSendBtn')
  const setThermometerMsg = document.getElementById('setThermometerMsg')
  const getCommunicationAddressSendBtn = document.getElementById('getCommunicationAddressSendBtn')
  const getCommunicationAddressMsg = document.getElementById('getCommunicationAddressMsg')
  const getGatewayInfoSendBtn = document.getElementById('getGatewayInfoSendBtn')
  const getGatewayInfoMsg = document.getElementById('getGatewayInfoMsg')
  const getThermometerSendBtn = document.getElementById('getThermometerSendBtn')
  const getThermometerMsg = document.getElementById('getThermometerMsg')

  let isConnect = false
  const stomp = new StompJs.Client({
    onConnect: connectCallback,
    onWebSocketClose: closeCallback,
    onWebSocketError: errorCallback
  })

  /**
   * 点击连接按钮
   */
  connectBtn.addEventListener('click', () => {
    stomp.brokerURL = wsUrlText.value
    stomp.activate()
  })

  /**
   * 设置通信地址
   */
  setCommunicationAddressSendBtn.addEventListener('click', () => {
    const data = {
      gatewaySn: gatewaySnText.value,
      deviceSn: 0,
      commandCode: 3000000,
      requestJson: JSON.parse(setCommunicationAddressSendText.value)
    }
    interact(data).then(res => {
      alert(JSON.stringify(res))
    })
  })

  /**
   * 设置温度计配置
   */
  setThermometerSendBtn.addEventListener('click', () => {
    const data = {
      gatewaySn: gatewaySnText.value,
      deviceSn: deviceSnText.value,
      commandCode: 3000100,
      requestJson: JSON.parse(setThermometerSendText.value)
    }
    interact(data).then(res => {
      alert(JSON.stringify(res))
    })
  })

  /**
   * 获取通信地址
   */
  getCommunicationAddressSendBtn.addEventListener('click', () => {
    const data = {
      gatewaySn: gatewaySnText.value,
      deviceSn: 0,
      commandCode: 4000000
    }
    interact(data).then(res => {
      alert(JSON.stringify(res))
    })
  })

  /**
   * 获取网关配置
   */
  getGatewayInfoSendBtn.addEventListener('click', () => {
    const data = {
      gatewaySn: gatewaySnText.value,
      deviceSn: 0,
      commandCode: 4000001
    }
    interact(data).then(res => {
      alert(JSON.stringify(res))
    })
  })

  /**
   * 获取温度计配置
   */
  getThermometerSendBtn.addEventListener('click', () => {
    const data = {
      gatewaySn: gatewaySnText.value,
      deviceSn: deviceSnText.value,
      commandCode: 4000100
    }
    interact(data).then(res => {
      alert(JSON.stringify(res))
    })
  })

  /**
   * 交互
   */
  function interact(data) {
    return myFetch('interact/send', 'post', data)
  }

  function myFetch(path, method, body) {
    let options = {
      headers: {
        mode: 'no-cors',
        'Content-Type': 'application/json;charset=UTF-8'
      }
    }
    if (method !== undefined) {
      options.method = method
    }
    if (body !== undefined) {
      options.body = JSON.stringify(body)
    }
    return fetch(urlText.value + path, options)
      .then(res => res.json())
      .catch(e => {
        msg.innerText = `接口[${path}]调用失败\n${e}`
        throw e
      })
  }

  /**
   * 连接成功回调
   */
  function connectCallback() {
    msg.innerText = 'WebSocket连接成功'
    /* 事件 */
    // 温度计事件
    stomp.subscribe(`/topic/iot/event/${gatewaySnText.value}/${deviceSnText.value}/1000100`, function (res) {
      thermometerMsg.value = res.body + '\n' + thermometerMsg.value
    })
    /* 故障详情 */
    stomp.subscribe(`/topic/iot/fault/${gatewaySnText.value}`, function (res) {
      faultMsg.value = res.body + '\n' + faultMsg.value
    })
    /* 广播 */
    // 校时广播
    stomp.subscribe('/topic/iot/broadcast/5000000', function (res) {
      timeSynMsg.value = res.body + '\n' + timeSynMsg.value
    })
    /* 交流 */
    // 获取时间戳
    stomp.subscribe(`/topic/iot/communication/${gatewaySnText.value}/0/6000000`, function (res) {
      getTimeMsg.value = res.body + '\n' + getTimeMsg.value
    })
    /* 交互 */
    // 设置通信地址
    stomp.subscribe(`/topic/iot/interact/${gatewaySnText.value}/0/3000000`, function (res) {
      setCommunicationAddressMsg.value = res.body + '\n' + setCommunicationAddressMsg.value
    })
    // 获取通信地址
    stomp.subscribe(`/topic/iot/interact/${gatewaySnText.value}/0/4000000`, function (res) {
      getCommunicationAddressMsg.value = res.body + '\n' + getCommunicationAddressMsg.value
    })
    // 获取网关配置
    stomp.subscribe(`/topic/iot/interact/${gatewaySnText.value}/0/4000001`, function (res) {
      getGatewayInfoMsg.value = res.body + '\n' + getGatewayInfoMsg.value
    })
    // 设置温度计配置
    stomp.subscribe(`/topic/iot/interact/${gatewaySnText.value}/${deviceSnText.value}/3000100`, function (res) {
      setThermometerMsg.value = res.body + '\n' + setThermometerMsg.value
    })
    // 获取温度计配置
    stomp.subscribe(`/topic/iot/interact/${gatewaySnText.value}/${deviceSnText.value}/4000100`, function (res) {
      getThermometerMsg.value = res.body + '\n' + getThermometerMsg.value
    })
  }

  /**
   * 连接关闭回调
   */
  function closeCallback(e) {
    isConnect = false
    msg.innerText = '连接关闭回调'
  }

  /**
   * 连接错误回调
   */
  function errorCallback(e) {
    isConnect = false
    msg.innerText = '连接错误回调'
  }

</script>

</html>
